<template>
  <div class="page page-home" v-loading="loading">
    <div class="images">
      <date-time
        :dateTime="form.dateTime"
        v-on:change-date-time="changeDateTime"
        style="margin-bottom: 30px"
      >
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="查询名称">
            <el-input v-model="form.searchName" placeholder></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.state" clearable placeholder="请选择状态">
              <el-option label="全部" value></el-option>
              <el-option label="NOK" value="1"></el-option>
              <el-option label="OK" value="2"></el-option>
              <el-option label="报警" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工位信息">
            <!-- <el-input v-model="form.station" placeholder></el-input> -->
            <el-select
              @change="getCameraNoByStation"
              v-model="form.station"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option value="" label="全部"></el-option>
              <el-option
                v-for="(item, idx) in station_list"
                :key="idx"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="相机编号">
            <!-- <el-input v-model="form.cameraNo" placeholder></el-input> -->
            <el-select v-model="form.cameraNo" clearable placeholder="请选择">
              <el-option value="" label="全部"></el-option>
              <el-option
                v-for="(item, idx) in camera_no_list"
                :key="idx"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="showImagesChange">查询</el-button>
          </el-form-item>
        </el-form>
      </date-time>
      <el-row :gutter="20">
        <el-col
          :span="6"
          v-for="(item, index) in list"
          :key="index"
          style="margin-bottom: 20px"
        >
          <el-card :body-style="{ padding: '10px' }">
            <!-- <img :src="item.id" class="image" /> -->
            <el-image
              style="width:100%;height:200px;"
              :src="item.path"
              fit="cover"
              lazy
              :preview-src-list="[item.path]"
            ></el-image>
            <div style="padding: 14px">
              <div class="bottom">
                <span>{{ item.fileName }}</span>
                <!-- <el-button type="text" class="button">下载图片</el-button> -->
                <a class="button" target="_blank" :href="item.path">下载图片</a>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="page_size"
          :current-page.sync="page"
          @size-change="showImages"
          @current-change="showImages"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { showImages, getCameraNo, getStation } from '@/api/picture'

import DateTime from '@/components/DateTime/index.vue'

export default {
  components: { DateTime },
  data() {
    return {
      loading: true,
      form: {
        dateTime: [],
        searchName: '',
        state: '',
        station: '',
        cameraNo: '',
      },
      station_list: [],
      camera_no_list: [],
      list: [],
      total: 40,
      page: 1,
      page_size: 12,
      baseURL: process.env.VUE_APP_BASE_API,
    }
  },
  created() {
    // this.form.dateTime.push(this.formattime(new Date(), "yyyy.MM.dd hh:mm"));
    // this.form.dateTime.push(this.formattime(new Date(), "yyyy.MM.dd hh:mm", 1));

    // this.form.dateTime.push("2021-12-01 00:00:00");
    // this.form.dateTime.push("2021-12-31 00:00:00");
    this.form.dateTime.push('')
    this.form.dateTime.push('')
  },
  mounted() {
    this.getStation()
    // this.getCameraNo();
    this.showImages()
  },
  methods: {
    getCameraNoByStation() {
      this.cameraNo = ''
      this.camera_no_list = []
      this.getCameraNo()
    },
    async getCameraNo() {
      let station = {
        station: this.form.station,
      }
      let { data } = await getCameraNo(station)

      this.camera_no_list = data
    },
    async getStation() {
      let { data } = await getStation()

      this.station_list = data
    },
    async showImagesChange() {
      let request_data = {
        page: 1,
        limit: this.page_size,
        name: this.form.searchName,
        state: this.form.state,
        station: this.form.station,
        cameraNo: this.form.cameraNo,
        startTime: this.form.dateTime[0],
        endTime: this.form.dateTime[1],
      }
      const { data } = await showImages(request_data)
      this.total = data.totalRow
      this.list = data.data
      this.loading = false
    },

    async showImages() {
      let request_data = {
        page: this.page,
        limit: this.page_size,
        name: this.form.searchName,
        state: this.form.state,
        station: this.form.station,
        cameraNo: this.form.cameraNo,
        startTime: this.form.dateTime[0],
        endTime: this.form.dateTime[1],
      }
      const { data } = await showImages(request_data)
      this.total = data.totalRow
      this.list = data.data
      this.loading = false
    },
    changeDateTime(e) {
      if (!e) {
        e = ['', '']
      }
      this.form.dateTime = e
      // this.showImages();
    },
  },
}
</script>

<style lang="scss" scoped>
.page-home {
  width: 100% !important;
  color: rgba(16, 16, 16, 100);
  font-family: SourceHanSansSC-regular;
  margin: auto 0 60px 0;
  .search_box {
    .search_input {
      display: inline-block;
      width: 200px;
    }
  }
  .images {
    padding: 40px;
    .bottom {
      margin-top: 13px;
      height: 42px;
      line-height: 12px;
      display: flex;
      align-items: center;
      span {
        line-height: 1.5;
        flex: 1;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        // word-wrap:break-word;
      }
    }

    .button {
      margin-left: 10px;
      padding: 0;
    }

    .image {
      width: 100%;
      display: block;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: '';
    }

    .clearfix:after {
      clear: both;
    }
    .pagination {
      padding: 20px;
      text-align: center;
    }
  }
}
</style>
<style lang="scss">
.page-home {
  .el-date-editor--datetimerange.el-input,
  .el-date-editor--datetimerange.el-input__inner {
    width: 260px !important;
  }
  .el-range-editor--medium .el-range-separator {
    line-height: 32px !important;
  }
  .el-date-editor {
    border: 0 !important;
    padding: 0 !important;
    .el-input__icon {
      display: none !important;
    }
  }
  .el-range-input,
  .el-range-separator {
    color: rgba(39, 97, 219, 100) !important;
    font-size: 12px !important;
  }
}
</style>
